<template>
  <!-- 标签栏 -->
  <van-tabs
    v-model:active="StatusActive"
    sticky
    @click-tab="TabChange"
    color="#fba12f"
    title-active-color="#fba12f"
    background="#f7f7f7"
  >
    <van-tab
      v-for="(item, key) in StatusList"
      :title="item.title"
      :name="item.value"
      :key="key"
    ></van-tab>
  </van-tabs>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      finished-text="没有更多了"
      @load="OnLoad"
    >
      <div class="list">
        <!-- 商品卡片 -->
        <div class="item" v-for="item in list" :key="item.id">
          <div class="header">
            <div class="code">订单号：{{ item.code }}</div>
            <div class="status">{{ item.status_text }}</div>
          </div>

          <van-card
            :thumb="item.product.products.thumb_text"
            @click="OnOpenProductCard(item.order_product)"
          >
            <template #title>
              <div class="title">{{ item.product.products.name }}</div>
            </template>

            <!-- 卡片的插槽部分 -->
            <template #desc v-if="item.product.attrs">
              <van-tag
                v-for="(attr, index) in JSON.parse(item.product.attrs)"
                :key="index"
                class="tag"
                type="primary"
                >{{ attr.value }}</van-tag
              >
            </template>

            <!-- 卡片的插槽部分 -->
            <template #desc v-else>
              <van-tag class="tag" type="danger">无商品规格</van-tag>
            </template>

            <template #price>
              <div class="price-box">
                <div class="price">商品总价：￥ {{ item.product.total }}</div>
                <div class="num">x{{ item.product.pronum }}</div>
              </div>
            </template>
          </van-card>

          <div class="footer">
            <div class="box">
              <div class="time">下单时间：{{ item.createtime_text }}</div>

              <div class="total">
                <div class="coupon" v-if="item.couponid">
                  优惠：￥ {{ item.coupon_price }}
                </div>
                <div>实付款：￥ {{ item.amount }}</div>
              </div>
            </div>

            <div class="btn-list">
              <!-- status = 1 仅退款 -->
              <van-button
                v-if="item.status == '1'"
                class="button"
                type="danger"
                size="mini"
                @click="OnRefund1(item.id)"
                >申请退款</van-button
              >
              <van-button
                v-if="item.status == '2'"
                class="button"
                type="danger"
                size="mini"
                @click="OnRefund2(item.id)"
                >申请退货退款</van-button
              >

              <!-- status = 2 -->
              <van-button
                v-if="item.status == '2'"
                class="button"
                type="success"
                size="mini"
                @click="OnConfirmReceive(item.id)"
                >确认收货</van-button
              >
              <van-button
                v-if="item.status == '2'"
                class="button"
                type="warning"
                size="mini"
                @click="ToExpressInfo(item.id)"
                >物流详情</van-button
              >

              <!-- status = 3 已收货 -->
              <van-button
                v-if="item.status == '3'"
                class="button"
                type="warning"
                size="mini"
                @click="ToOrderInfo(item.id)"
                >立即评价</van-button
              >

              <!-- 退货退款 -->
              <van-button
                v-if="item.status == '-2'"
                class="button"
                type="success"
                size="mini"
                >等待后台审核...</van-button
              >
              <van-button
                v-if="item.status == '-3'"
                class="button"
                type="warning"
                size="mini"
                @click="ToBack(item.id)"
                >请填写退货信息</van-button
              >

              <van-button
                class="button"
                type="primary"
                size="mini"
                @click="ToOrderInfo(item.id)"
                >订单详情</van-button
              >
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>

  <!-- 仅退款弹框 -->
  <van-popup
    v-model:show="ApplyShow1"
    position="bottom"
    round
    :style="{ paddingBottom: '20px' }"
  >
    <van-picker
      title="退款原因"
      :columns="RemarkList"
      @cancel="ApplyShow1 = false"
      @confirm="OnRefundApply"
    />
  </van-popup>

  <!-- 退货退款的弹框 -->
  <van-popup v-model:show="ApplyShow2" position="bottom" round>
    <van-form @submit="OrderApplyConfirm">
      <van-field
        v-model="remark"
        name="remark"
        rows="5"
        autosize
        type="textarea"
        maxlength="120"
        placeholder="请输入申请原因"
        show-word-limit
        :rules="[{ required: true, message: '请填写申请原因' }]"
      />
      <van-button
        square
        block
        color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
        native-type="submit"
        >提交申请</van-button
      >
    </van-form>
  </van-popup>

  <!-- 商品列表弹出框 -->
  <van-popup
    v-model:show="ProductShow"
    position="bottom"
    round
    style="padding: 10px 0"
  >
    <van-card
      v-for="item in ProductList"
      :thumb="item.products.thumb_text"
      :num="item.pronum"
      :key="item.id"
      @click="ToProductInfo(item.proid)"
    >
      <template #title>
        <div class="title">{{ item.products.name }}</div>
      </template>

      <!-- 卡片的插槽部分 -->
      <template #desc v-if="item.attrs">
        <van-tag
          v-for="(attr, index) in JSON.parse(item.attrs)"
          :key="index"
          class="tag"
          type="primary"
          >{{ attr.value }}</van-tag
        >
      </template>

      <template #desc v-else>
        <van-tag class="tag" type="danger">无规格数据</van-tag>
      </template>

      <template #tags>
        <div class="price">单价：￥{{ item.price }}</div>
      </template>

      <template #price>
        <div class="price">合计：￥{{ item.total }}</div>
      </template>
    </van-card>

    <div style="width: 80%; margin: 1em auto 0em">
      <van-button round block type="primary" @click="ProductShow = false"
        >关闭</van-button
      >
    </div>
  </van-popup>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 标签栏数据
const StatusActive = ref("all");
// tab栏
const StatusList = ref([
  { title: "全部", value: "all" },
  { title: "已支付", value: "1" },
  { title: "已发货", value: "2" },
  { title: "已收货", value: "3" },
  { title: "已完成", value: "4" },
  { title: "退货退款", value: "-2" },
]);
// 用户登录信息
const business = proxy.$business;
// 下拉刷新的数据
const list = ref([]); // 数据列表
const page = ref(1); // 分页
const loading = ref(false); // 加载状态
const finished = ref(false); // 是否无更多数据
const refreshing = ref(false); // 下拉刷新
// 订单id
const orderid = ref(0);
// 仅退款
const ApplyShow1 = ref(false);
// 备注数据
const RemarkList = ref([
  { text: "拍错了", value: "拍错了" },
  { text: "地址有误", value: "地址有误" },
  { text: "不想要了", value: "不想要了" },
  { text: "参数选错了", value: "参数选错了" },
  { text: "选择其他的", value: "选择其他的" },
]);
// 退货退款
const ApplyShow2 = ref(false);
// 备注
const remark = ref("");
// 商品列表弹出显示
const ProductShow = ref(false);
const ProductList = ref([]);

// 加载前钩子
onBeforeMount(() => OnRefresh());

// 切换Tab栏
const TabChange = debounce(() => {
  OnRefresh();
}, 500);

// 下拉刷新回调函数
const OnRefresh = () => {
  page.value = 1;
  list.value = [];
  finished.value = false;
  loading.value = true;
  refreshing.value = true;

  setTimeout(OnLoad, 1000);
};

// 上拉加载回调函数
const OnLoad = async () => {
  // 如果是下拉刷新，重置其值
  if (refreshing.value === true) {
    refreshing.value = false;
  }
  // 组装参数
  const params = {
    busid: business.value.id,
    page: page.value,
    status: StatusActive.value,
  };
  // 发起请求
  const result = await proxy.$http.post({
    url: "/order/index",
    params,
  });
  // 取消懒加载
  loading.value = false;
  // 处理请求结果
  if (result.code === 1) {
    // 获取数据总数
    let count = result.data ? result.data.count : 0;
    // 获取数据并且合并数组
    list.value = result.data ? list.value.concat(result.data.list) : [];
    // 循环处理数据并返回个新数组
    list.value.map((item) => {
      // 从订单商品里取第一个商品渲染到列表
      item.product = item.order_product[0] ?? null;
      // 如果有使用优惠券
      if (item.couponid) {
        // 购买的商品总价
        let amount = 0;
        // 循环计算
        item.order_product.map((product) => {
          amount += parseFloat(product.total);
        });
        // 优惠价格
        item.coupon_price = (amount - parseFloat(item.amount)).toFixed(2);
      }
    });
    // console.log(list.value);
    // 判断是否加载完所有数据
    if (list.value.length >= count) {
      // 完成加载
      finished.value = true;
      return;
    }
    // 分页+1
    page.value += 1;
  } else {
    // 结束加载
    finished.value = true;
    proxy.$fail(result.msg);
  }
};

// 点击card组件可以查看当前订单购买的商品
const OnOpenProductCard = (product) => {
  ProductList.value = product;
  ProductShow.value = true;
};

// 申请退款
const OnRefund1 = (id) => {
  ApplyShow1.value = true;
  orderid.value = id;
};

// 申请退货退款
const OnRefund2 = (id) => {
  ApplyShow2.value = true;
  orderid.value = id;
};

// 确认申请仅退款
const OnRefundApply = async (value) => {
  // 组装参数
  const params = {
    id: orderid.value,
    busid: business.value.id,
    refundreason: value.selectedValues[0],
  };
  // 发起请求
  const result = await proxy.$http.post({
    url: "/order/refund1",
    params,
  });
  if (result.code === 1) {
    proxy.$success(result.msg);
    ApplyShow1.value = false;
    OnRefresh();
  } else {
    proxy.$fail(result.msg);
    ApplyShow1.value = false;
  }
};

// 确认申请退货退款
const OrderApplyConfirm = async (value) => {
  // 组装参数
  const params = {
    id: orderid.value,
    busid: business.value.id,
    refundreason: value["remark"],
  };
  // 发起请求
  const result = await proxy.$http.post({
    url: "/order/refund2",
    params,
  });
  if (result.code === 1) {
    proxy.$success(result.msg);
    ApplyShow2.value = false;
    OnRefresh();
  } else {
    proxy.$fail(result.msg);
    ApplyShow2.value = false;
  }
};

// 确认收货
const OnConfirmReceive = (id) => {
  orderid.value = id;
  proxy
    .$confirm({
      title: "确认收货",
      message: "是否确认收货",
    })
    .then(async () => {
      // 组装参数
      const params = {
        id: orderid.value,
        busid: business.value.id,
      };
      // 发起请求
      const result = await proxy.$http.post({
        url: "/order/receive",
        params,
      });
      if (result.code === 1) {
        proxy.$success(result.msg);
        OnRefresh();
      } else {
        proxy.$fail(result.msg);
      }
    })
    .catch(() => {});
};

// 跳转订单详情
const ToOrderInfo = (orderid) => {
  proxy.$router.push({ path: "/order/info", query: { orderid } });
};

// 跳转到商品详情页
const ToProductInfo = (proid) => {
  proxy.$router.push({ path: "/product/info", query: { proid } });
};

// 跳转到物流详情页
const ToExpressInfo = (orderid) => {
  proxy.$router.push({ path: "/order/express", query: { orderid } });
};

// 跳转到填写退货信息页
const ToBack = (orderid) => {
  proxy.$router.push({ path: "/order/back", query: { orderid } });
};
</script>

<style scoped>
@import url("/assets/css/OrderIndex.css");
</style>